<template>
  <div class="healthEvaluationRecords relative box-border h-100% min-h-screen w-auto bg-cover">
    <div class="sticky left-0 right-0 top-0rpx z-99 box-border bg-[rgb(249,251,240)] pb-32rpx"
         :style="{ paddingTop: `${searchBarTop}px` }"
         @click="goHealthBack">
      <div class="z-999 box-border flex items-center pl-32rpx">
        <uni-icons type="back" size="22" />
        <text class="text-center text-28rpx font-600">测评记录</text>
      </div>
    </div>
    <div class="sticky left-0 right-0 top-116rpx z-99 box-border bg-hex-FFF8EE px-32rpx py-16rpx text-28rpx text-hex-E0A95F">
      <div>建议每3个月重新测试一次,由于不同季节的生活习惯变化使得测评结果也将发生变化</div>
      <div class="flex flex-col items-end justify-end">
        <div
          class="text-right font-600 text-hex-ff4d4e"
          @click="navTo('/pages-health/healthDetail')"
        >去测评</div>
        <div class="h-2rpx w-80rpx bg-hex-ff4d4e" />
      </div>
    </div>
    <div v-if="evaluationsList.length > 0" class="box-border p-32rpx">
      <div
        v-for="item in evaluationsList"
        class="boxshadow mb-32rpx box-border rounded-32rpx bg-hex-ffffff p-32rpx"
        @click="goReport(item.id, item.question_category_id)">
        <div class="mb-26rpx flex justify-between">
          <div class="flex items-center text-28rpx font-600 text-hex-333333">
            <image
              :src="`${cdnUrl}/imgs/healthDetail/questionlogo.png${imgVersion}`"
              mode="scaleToFill"
              class="mr-12rpx h-36rpx w-36rpx"
            />
            <div>{{ item.question_category_name }}</div>
          </div>
          <div class="text-28rpx text-hex-999999">{{ formatTime(item.created_at) }}</div>
        </div>
        <div class="mb-32rpx h-2rpx w-100% bg-hex-F5F5F5" />
        <div class="flex items-center justify-between">
          <div class="text-28rpx">
            <div v-if="item.supplement_number">
              <div class="mb-4rpx text-hex-999999">补充营养推荐:</div>
              <div class="font-600 text-hex-3333333">{{ item.supplement_number }}种补剂</div>
            </div>
          </div>
          <div
            class="btn-theme-bg rounded-80rpx px-34rpx py-10rpx text-28rpx">查看报告</div>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="flex flex-col items-center">
        <div class="image">
          <image
            :src="`${cdnUrl1}/imgs/xy/other/noneeattention.png${imgVersion}`"
            mode="scaleToFill"
            class="h-364rpx w-364rpx"
          />
        </div>
        <div class="mb-64rpx text-28rpx text-hex-7C8699">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>

import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'

let searchBarTop: any = $ref('24')
onLoad(() => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  // #endif
})
const goback = () => {
  uni.reLaunch({
    url: '/pages-health/healthProgramme',
  })
}
let evaluationsList: any = $ref([])
const getEvaluationsList = async () => {
  const reqData = {
    method: 'post',
    headers: { timestamp: new Date().getTime() },
    data: {
      'status': '1',
    },
  }
  const { status, data } = await Fetch('/api/s/health/evaluations', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  evaluationsList = data.result.dataList
}
onMounted(() => {
  getEvaluationsList()
})

const formatTime = (date) => {
  dayjs.extend(utc)
  if (!date) {
    return
  }
  return dayjs(date).utc().local().format('MM-DD HH:mm')
}

const goReport = (id, type) => {
  if (!type) {
    return
  }

  if (type === 8) {
    uni.navigateTo({
      url: `/pages-health/healthPhiReport?evaluationId=${id}&type=${type}`,
    })
    // navTo()
  } else {
    uni.navigateTo({
      url: `/pages-health/healthReport?evaluationId=${id}&type=${type}`,
    })
    // navTo()
  }
}
</script>

<style lang="scss" scoped>
.healthEvaluationRecords{
  background: linear-gradient(to bottom, rgb(249 251 240), rgb(223 246 249), rgb(216 234 252),rgb(230 236 253));

  .boxshadow{
    box-shadow: 0rpx 12rpx 40rpx 0rpx #eff5fc;
  }
}
</style>
